<template>
	<view>
		<view class="head">
			<view class="nav">
				<u-subsection :list="list" mode="subsection" activeColor="#882027" :current="curNow"
					@change="sectionChange"></u-subsection>
			</view>
			<view class="tab" v-if="curNow == 0">
				<u-tabs :list="list0" lineHeight="4	" lineWidth="26" lineColor="#882027"
					:activeStyle="{color:'#882027'}" :scrollable="false" @click="click"></u-tabs>
			</view>
			<view class="tab" v-if="curNow == 1">
				<u-tabs :list="list1" lineHeight="4	" lineWidth="26" lineColor="#882027"
					:activeStyle="{color:'#882027'}" :scrollable="false" @click="click"></u-tabs>
			</view>
		</view>
		<view class="list flex" v-if="curNow == 0" @click="navto('./visitOrder/visitOrder?id=' + item.order_id)" v-for="(item,index) in data">
			<view class="flex">
				<image :src="item.avatar" mode=""></image>
				<view class="ml-20">
					<view class="flex">
						<view class="mr-20 size-28">{{item.patient_name}}</view>
						<view class="tag">{{item.patient_gender == 0 ? '女' : '男'}}</view>
					</view>
					<view class="size-24 mt-10">{{item.patient_mark}}</view>
				</view>
			</view>
			<view class="size-24">{{item.appoint_time}}</view>
		</view>
		<view class="list flex" v-if="curNow == 1" @click="navto('./inquiryOrder/inquiryOrder?id=' + item.order_id)" v-for="(item,index) in data">
			<view class="flex">
				<image :src="item.avatar" mode=""></image>
				<view class="ml-20">
					<view class="flex">
						<view class="mr-20 size-28">{{item.patient_name}}</view>
						<view class="size-24">{{item.patient_gender == 0 ? '女' : '男'}} {{item.patient_age}}</view>
					</view>
				</view>
			</view>
			<image src="../../../static/right.png" style="width: 40rpx;height: 40rpx;" mode=""></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: ['问诊订单', '药品订单'],
				curNow: 0,
				list0: [{
					name: '已预约',
				}, {
					name: '进行中',
				}, {
					name: '已完成'
				}],
				list1: [{
					name: '待发货',
				}, {
					name: '已发货',
				}, {
					name: '已签收'
				}],
				page:1,
				current:1,
				data:[]
			};
		},
		onLoad() {
			this.order()
		},
		methods: {
			order() {
				this.$api.myOrderList({
					page_no:this.page,
					page_size:20,
					order_type:this.curNow,  //0=面诊订单,1=药品订单
					order_status:this.current
				}).then(res => {
					this.data = res.data
				})
			},
			sectionChange(index) {
				this.current = 1
				this.curNow = index;
				this.order()
			},
			click(item) {
				console.log('item', item);
				this.current = item.index+1
				this.order()
			},
			// click2(item) {
			// 	console.log('item', item);
			// },
			navto(url) {
				uni.navigateTo({
					url
				})
			}
		}
	}
</script>

<style lang="scss">
	.tag {
		width: 48rpx;
		height: 40rpx;
		background: #f6eded;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		text-align: center;
		line-height: 40rpx;
		font-size: 24rpx;
		color: #882027;
	}

	.list {
		width: 690rpx;
		height: 150rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		margin: 30rpx auto 0;
		padding: 30rpx;

		image {
			width: 90rpx;
			height: 90rpx;
			border-radius: 50%;
			background-color: pink;
		}
	}

	.head {
		width: 100%;
		position: sticky;
		top: 0;
		background-color: #fff;
		padding-bottom: 20rpx;

		.nav {
			width: 320rpx;
			margin: 0rpx auto 0;
			padding-top: 20rpx;
			// border-radius: 50rpx;
			// overflow: hidden;
		}

		.tab {
			margin-top: 20rpx;
		}
	}

	page {
		background-color: #f8f8f8;
	}
</style>
